<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setLocale scope="session" value="${param['language']}" />
<!DOCTYPE html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
    <head>
        <link rel="shortcut icon" href="./resources/images/ico.png" type="image/gif" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>BabelChat</title>
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <!-- Le styles -->
        <!-- <link href="css/prefs.css" rel="stylesheet"> -->
        <!-- <link href="css/design.css" rel="stylesheet"> -->
        <link href="css/estrutura.css" rel="stylesheet">
        <link href="./resources/bootstrap.css" rel="stylesheet">

        <script type="text/javascript">
            (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();
        </script>
        <style type="text/css">
            body {
                padding-top: 40px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }
        </style>
        <link href="./resources/bootstrap-responsive.css" rel="stylesheet">

        <!-- Le fav and touch icons -->
        <link rel="apple-touch-icon" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="http://twitter.github.com/bootstrap/examples/images/apple-touch-icon-114x114.png">
    </head>

    <body>
        <div>
            <style type="text/css">
                /* Override some defaults */
                html, body {
                    background-color: #eee;
                }
                body {
                    padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
                }
                .container > footer p {
                    text-align: center; /* center align it with the container */
                }
                .container {
                    width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
                }

                /* The white background content wrapper */
                .container > .content {
                    background-color: #fff;
                    padding: 20px;
                    margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
                    -webkit-border-radius: 0 0 6px 6px;
                    -moz-border-radius: 0 0 6px 6px;
                    border-radius: 0 0 6px 6px;
                    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                    box-shadow: 0 1px 2px rgba(0,0,0,.15);
                }

                /* Page header tweaks */
                .page-header {
                    background-color: #f5f5f5;
                    padding: 20px 20px 10px;
                    margin: -20px -20px 20px;
                }

                /* Styles you shouldn't keep as they are for displaying this base example only */
                .content .span10,
                .content .span4 {
                    min-height: 500px;
                }
                /* Give a quick and non-cross-browser friendly divider */
                .content .span4 {
                    margin-left: 0;
                    padding-left: 19px;
                    border-left: 1px solid #eee;
                }

                .topbar .btn {
                    border: 0;
                }

            </style>
        </div>
        <jsp:include page="header.jsp" flush="true"/>
        <div class="container">

            <div class="content">
                <div class="page-header">
                    <h1>“Tudo o que temos que decidir é o que fazer com o tempo que nos é dado”
                        <small> Gandalf</small>
                    </h1>
                </div>
                <div class="row">
                    <div class="span10">
                        <h2>Cronograma</h2>
                        <table class="table-condensed" border="1" cellpadding="4" cellspacing="1" width="606" style="margin-left: 120px">
                            <tbody>
                                <tr>
                                    <td rowspan="2" width="36%" height="18"><p align="center"><font size="1" face="Arial"><b>Fases do Projeto</b></font></p>
                                        <p align="center"><font size="1" face="Arial"><b>(Desenvolvimento)</b></font></p>
                                    </td>
                                    <td colspan="10" width="64%" height="18"><p align="center"><font size="1" face="Arial"><b>MESES</b></font></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>1</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>2</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>3</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>4</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>5</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>6</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>7</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>8</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>9</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#FFFFFF" height="18"><p align="center"><font size="1" face="Arial"><b>10</b></font></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="36%" bgcolor="#FFFFFF" height="20"><font size="1" face="Arial"><b>Análise de requisitos</b></font></td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td><td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="36%" bgcolor="#FFFFFF" height="20"><font size="1" face="Arial"><b>Páginas (Front End)</b></font></td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="36%" bgcolor="#FFFFFF" height="20"><font size="1" face="Arial"><b>Validação e Autenticação (Aplicação)</b></font></td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="36%" bgcolor="#FFFFFF" height="20"><font size="1" face="Arial"><b>Servlets e Controles (Controle)</b></font></td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="36%" bgcolor="#FFFFFF" height="20"><font size="1" face="Arial"><b>Camada de Persistência (PostgreSQL)</b></font></td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="36%" bgcolor="#FFFFFF" height="20"><font size="1" face="Arial"><b>Outros Aplicativos (Android, iPhone, Jogos)</b></font></td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" height="20">&nbsp;</td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                    <td width="6%" bgcolor="#808080" height="20"><p align="center"><font color="#808080" size="1" face="Arial"><b>X</b></font></p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="span4">
                        <h3>Observações</h3>
                        <ul>
                            <li>
                                <span class="alert_top">Embora as etapas estejam <strong>sequenciais</strong> elas não devem ser abandonas nas outras etapas, porém, em cada etapa do cronograma uma determinada área receberá um foco maior, para que seja possível terminar (ou chegar o mais próximo possível do térmido de uma área e conseguir dar continuidade as outras, de uma maneira muito mais completa e estruturada.</span>
                            </li>
                        </ul>
                        <ol>
                            <li style="width: 1000px">
                                <h3>&bull; Iniciar um esboço de documentação - Prioridade: Urgente</h3>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <jsp:include flush="true" page="footer.jsp"/>
    </body>
</html>